<template>
  <div class="content">
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
	<div class="inquiryList-page">
			<u-sticky >
				<div class="inquiryList-top" style="background:#fff" id="inquiryListSearch">
					<div style="padding:24rpx">
						<u-search placeholder="输入牌号/品名/厂家等关键词" v-model="keywords" :showAction="false"  @search="searchList"></u-search>
					</div>
					
					
					<div class="sort-div">
						<div class="sort-item" :class="{'active':orderBy == ''}"
						@click="orderBy='';clearData();getList();">
							<div style="margin-right:10rpx">默认排序</div>
							<u-icon name="arrow-down-fill" size="10" top="2" :color="orderBy == '' ? '#FF5E01' : '#B8B8B8'"></u-icon>
						</div>
							<div class="sort-item" :class="{'active':updateTime}" style="margin-right:20rpx"
							 @click="orderBy = orderBy != 'updateTime1' ? 'updateTime1' : 'updateTime2';clearData();getList();">
								<div style="margin-right:10rpx">更新时间</div>
								<div class="icon-div">
									<u-icon name="arrow-up-fill" size="10" :color="orderBy == 'updateTime2' ? '#FF5E01' : '#B8B8B8'" top="3" ></u-icon>
									<u-icon name="arrow-down-fill" size="10" :color="orderBy == 'updateTime1' ? '#FF5E01' : '#B8B8B8'" bottom="3"></u-icon>
								</div>
							</div>
							<div class="sort-item" :class="{'active':dealNum}"
							@click="orderBy = orderBy != 'dealNum1' ? 'dealNum1' : 'dealNum2';clearData();getList();">
								<div style="margin-right:10rpx">成交吨数</div>
								<div class="icon-div">
									<u-icon name="arrow-up-fill" size="10" :color="orderBy == 'dealNum2' ? '#FF5E01' : '#B8B8B8'" top="3"></u-icon>
									<u-icon name="arrow-down-fill" size="10" :color="orderBy == 'dealNum1' ? '#FF5E01' : '#B8B8B8'" bottom="3"></u-icon>
								</div>
							</div>
						
						
						<div class="sort-item fifter-item" @click="showFif" 
						:class="{'active':categoryId != '' || parentCategoryId!= ''||areaId!= ''}">
							<span style="display: inline-block;margin-right:10rpx">筛选</span><img src="https://pic.moresu.com/Ftuc_Dm1DOsM33mIY7sKF2dxMcSM" style="width:22rpx;height:22rpx"/>
						</div>
					</div>
					
					
				</div>
			 </u-sticky>
			 
			 <div style="padding:32rpx;padding-bottom:0">
			 	 <u-swiper
			 		radius='18rpx'
			 		keyName="adImage"
			 		:list="adList"
			 		height="196rpx"
			 		@click="clickAD"
			 		indicator
			 		indicatorMode="line"
			 	></u-swiper>
			 </div>
			
			<div class="con-list-div" style="padding:0 32rpx;padding-top:32rpx">
				
				<div >
					<div class="store-list-item" v-for="(item,index) in list" :key="item.storeId" @click="toInfo(item)">
						<div class="store-top">
							<div class="store-name">{{item.storeName}}</div>
							<div class="store-type">{{item.storeType}}</div>
						</div>
						<div class="store-tip">
							主营：{{item.mainBusiness}}
						</div>
						<div class="store-arrt">
							<!-- <span>成交：{{item.orderNum}}吨</span>
							<span style="padding-left:20rpx">报价数：{{item.priceCount}}次</span> -->
							<span style="padding-left:20rpx">所在地：{{item.storeArea}}</span>
						</div>
					</div>
				</div>
				
				
			</div>
			<div style="padding-bottom:40rpx;">
			   <u-loadmore :status="status" ></u-loadmore>
			</div>
	</div>
	
	
	<!--筛选-->
	<u-popup :show="show" @close="closeShow" mode="right">
		<div class="fifter-popup">
			   <div class="big-title">一级分类</div>
			   <div class="title-list">
				   <div class="title-item" 
				    @click="changeParent(item,index)"
				   :class="{'active':parentCategoryId2 === item.parentCategoryId}"
				   v-for="(item,index) in categoryList" :key="item.parentCategoryId">{{item.parentCategoryName}}</div>
			   </div>
			   <div class="big-title" v-if="categoryList[parentIndex2]">二级分类</div>
			   <div class="title-list" v-if="categoryList[parentIndex2]">
				   <div class="title-item" 
				    @click="changeCategory(item)"
				   :class="{'active':categoryId2 === item.categoryId}"
				   v-for="item in categoryList[parentIndex2]['subCategoryList']" :key="item.categoryId">{{ item.categoryName }}</div>
			   </div>
			   
			   <div class="big-title">交货地</div>
			   <div class="title-list">
				   <div class="title-item"
				   @click="changeArea(item)"
				   :class="{'active':areaId2 === item.areaId}"
				   v-for="item in areaList" :key="item.areaId">{{item.areaName}}</div>
			   </div>
		</div>
		<div class="fifter-popup-bottom">
			<u-button text="重置"  shape="circle" @click="reset"></u-button>
			<div style="width:24rpx"></div>
			<u-button text="确定" type="primary" shape="circle" @click="sumitFif"></u-button>
		</div>
	</u-popup>
	
	<liu-drag-button :canDocking="false" :bottomPx='170' :rightPx='10'>
		 <img src="https://pic.moresu.com/FtIF-CejsBbUyUGS-bMGeZoSxvN8" style="width:136rpx;height:134rpx" @click="toNewPage('/pagesUser/business/businessCheckIn')"/>
	</liu-drag-button>
	
  </div>
</template>

<script>
 import {getStoreList,storeAreaList,storeCategoryList,pageSeo,getBannerList} from '@/config/api.js'
 
  import store from '@/store';
  const log = require('@/plugins/log.js')
  export default {
    components: {
     

    },
    data() {
      return {
		status: 'loadmore',
		list: [],
		pageNum: 0,
		pageSize:10,
		keywords: "", //关键词搜索
		categoryId: '', //分类ID
		brandId: '', //厂家ID
		parentCategoryId:'',
		areaId:'',
		count:0,
		scrollTop:0,
		show:false,
	    orderBy:'',
		
		brandList:[],
		categoryList:[],
		areaList:[],
		parentIndex:-1,
		categoryId2: '', //分类ID
		brandId2: '', //厂家ID
		parentCategoryId2:'',
		areaId2:'',
		parentIndex2:-1,
		createTime:'',
		dealNum:'',
		updateTime:'',
		
		adList:[]
      }
    },

	async onLoad(options) {
    	await this.$onLaunched;	
		this.keywords = '';
		this.categoryId = '';
		this.brandId = '';
		this.areaId = '';
		this.orderBy = '';
		this.parentCategoryId = '';
		this.parentIndex = -1
		this.count = 0;
		this.brandList = []
		this.categoryList = []
		this.areaList = []
		this.list = []
		this.clearData();
		this.getList()
		this.getAdList()
		
		
    },
	
	async onShow() {
		// #ifdef H5
		pageSeo({pageType: 'storeListPage'}).then((res)=>{
			document.title = res.pageTitle;
		})
		// #endif
		
	},

	onReachBottom() {
		if(this.list.length >= this.count) {
			this.status = 'nomore';
			return ;
		}
		this.pageNum = ++ this.pageNum;
		this.getList()
	},
	onPageScroll(res) {
		this.scrollTop = res.scrollTop
	},
    methods: {
		getAdList(){
		  let adType = 1
		  // #ifdef H5
		  adType = 2
		  // #endif
			
		  getBannerList({source:'storeList',adType:adType}).then((res)=>{
			  this.adList = res.list
		  })
		},
		
		clickAD(index){
			console.log("index",index)
			let item = this.adList[index]
			if(item.adLink){
				uni.navigateTo({
					url: url
				})
			}
		},
		
		toNewPage(url){
			uni.navigateTo({
				url: url
			})
		},
		toInfo(item){
			uni.navigateTo({
			  url: '/pagesUser/business/businessPage?storeId='+item.storeId
			})
		},
		changeParent(item,index){
		  this.parentCategoryId2 = item.parentCategoryId ? item.parentCategoryId : '';
		  this.categoryId2 = '';
		  this.brandId2 = '';
		  this.areaId2 = '';
		  this.parentIndex2 = index

		  this.getReceiveAreaList()
		},
		
		changeCategory(item){
		  this.categoryId2 = item.categoryId ? item.categoryId : '';
		  this.brandId2 = '';
		  this.areaId2 = '';

		  this.getReceiveAreaList()
		},
		
		changeBrand(item){
		  this.brandId2 = item.brandId ? item.brandId : '';
		},
		
		changeArea(item){
		  this.areaId2 = item.areaId ? item.areaId : '';
		},
		sumitFif(){
			this.categoryId = this.categoryId2
			this.brandId = this.brandId2
			this.parentCategoryId = this.parentCategoryId2
			this.areaId = this.areaId2
			this.parentIndex = this.parentIndex2
			this.clearData()
			this.getList()
			this.show = false
		},
		reset(){
			this.categoryId = ''
			this.brandId = ''
			this.parentCategoryId = ''
			this.areaId = ''
			this.parentIndex = -1
			this.clearData()
			this.getList()
			this.show = false
		},
		showFif(){
			this.categoryId2 = this.categoryId
			this.brandId2 = this.brandId
			this.parentCategoryId2 = this.parentCategoryId
			this.areaId2 = this.areaId
			this.parentIndex2 = this.parentIndex
			this.show = true;
			this.getReceiveAreaList();
		    this.getInquiryCategoryList()
		},
		
	    getReceiveAreaList(){
			  storeAreaList({keywords:this.keywords,parentCategoryId:this.parentCategoryId2,categoryId:this.categoryId2}).then((res)=>{
				this.areaList = res
			  })
		},
			
		 
		
		getInquiryCategoryList(){
		  return  storeCategoryList({keywords:this.keywords}).then((res)=>{
			this.categoryList = res
		  })
		},
			
		changeType(index){
			this.curIndex = index;
			this.categoryId = '';
			this.brandId = '';
			this.areaId = ''
			this.orderBy = ''
			this.parentCategoryId = ''
			this.parentIndex = -1
			this.brandList = []			this.categoryList = []			this.areaList = []
			this.clearData();
			this.getList();
		},
		closeShow(){
			this.show = false
		},
	
		
		searchList(){
			this.clearData();
			this.getList()

		},
		
		//清除数据
		clearData(){
			this.pageNum = 1;
			this.list = [];
			this.status = 'loadmore';
			this.count = 0;
		},
		getList(){
			let data = {};
			data.pageSize = 10;
			data.pageNum = this.pageNum;
			data.keywords = this.keywords;
			data.categoryId = this.categoryId;
			data.areaId = this.areaId;
			data.parentCategoryId = this.parentCategoryId;
			data.orderBy = this.orderBy
			data.createTime = this.createTime
			this.status = 'loading';
		    return	getStoreList(data).then((res)=>{
				this.list = this.list.concat(res.list ? res.list : [] );
				this.count = res.count;
				if(this.list.length >= this.count) {
					this.status = 'nomore';
				}else{
					this.status = 'loadmore';
				}
			}).catch(()=>{
				this.status = 'loadmore';
			})
		},
		
	}
	

  }
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';
.fifter-popup{
	padding:32rpx;
	width:90vw;
	height:calc(100vh - 100rpx);
	overflow: auto;
	.big-title{
		font-size: 28rpx;
		font-weight: bold;
	}
	.title-list{
		padding:32rpx 0;
		overflow: hidden;
		.active.title-item{
			background: #FF5E01;
			color:#fff;
		}
		.title-item{
			font-size:24rpx;
			width:170rpx;
			border-radius: 20rpx;
			height:40rpx;
			padding:4rpx 20rpx;
			background: #f8f8f8;
			text-align: center;
			float: left;
			margin-left:20rpx;
			margin-bottom:20rpx;
			@include textoverflow(1)
		}
	}
}
.fifter-popup-bottom{
	height:100rpx;
	border-top:1px solid #eee;
	padding:12rpx;
	@include flexbox(space-between,center)
}
.inquiryList-page{
	background: rgb(242,242,242);
	min-height: 100vh;
	.inquiryList-top{
		.search-tab-div{
			@include flexbox(space-around,center);
			font-size: 28rpx;
			.search-tab.active{
				font-weight: bold;
				color: #FF5E01;
			}
		}
		.sort-div{
			@include flexbox(space-between,center);
			padding:32rpx 24rpx;
			.sort-item{
				width:170rpx;
				height: 60rpx;
				background: rgba(246,246,246,1);
				border-radius: 35rpx;
				font-size: 24rpx;
				text-align: center;
				@include flexbox(center,center);
				flex:none;
				.icon-div{
					position: relative;
				}
			}
			.sort-item.active{
				color:#FF5E01
			}
			.sort-item.fifter-item{
				background: none;
				@include flexbox(flex-start,center);
				width:100rpx;
				flex:none
			}
			
		}
	}
	.con-list-div{
		.inquiry-list-item{
			position: relative;
			margin-bottom:30rpx;
			background: rgba(255,255,255,1);
			box-shadow: 0px 0px 10px rgba(0,17,52,0.09);
			border-radius: 18rpx;
			.inquiry-state{
				position: absolute;
				right:0;
				top:0;
				z-index: 1;
				width: 162rpx;
				height: 75rpx;
				background: #EFF5FF;
				border-radius: 0px 18rpx 0px 18rpx;
				text-align: center;
				color: #FF5E01;
				font-size:$m-font;
				line-height: 75rpx;
			}
			.inquiry-state.grey{
				color: #929292;
				background: #DEDEDE;
			}
			.inquiry-state.yellow{
				color: #FC9500;
				background: #FFF4E5;
			}
			.box-top{
				padding:32rpx;
				padding-bottom:40rpx;
				position: relative;
				
			}
			.box-bottom{
				
				padding:0 32rpx 32rpx 32rpx;
				position: relative;
				margin-top:-4rpx;
			}
			.box-top .jiao,.box-bottom .jiao{
			        width: calc(100% - 40rpx);
			        height:20rpx;
			        position:absolute;
			        left: 20rpx;
			    }
			.box-top .jiao{
				background: #fff;
				bottom: -20rpx;
			}
			.box-bottom .jiao{
				background: #fff;
				top: -20rpx;
			}
			.box-top .jiao::before,.box-bottom .jiao::before{
				content:'';
				position:absolute;
				width: 20rpx;
				height: 20rpx;
				left:-20rpx;
			}
			.box-top .jiao::after,.box-bottom .jiao::after{
				content:'';
				position:absolute;
				width: 20rpx;
				height: 20rpx;
				right:-20rpx;
			}
			.box-top .jiao::before{
				background-image: radial-gradient(circle 20rpx at 0 100%,  transparent 100rpx, #fff 50%);
			}
			.box-top .jiao::after{
				background-image: radial-gradient(circle 20rpx at 100% 100%,  transparent 100rpx, #fff 50%);
			}
			.box-bottom .jiao::before{
				background-image: radial-gradient(circle 20rpx at 0 0,  transparent 100rpx, #fff 50%);
			}
			.box-bottom .jiao::after{
				background-image: radial-gradient(circle 20rpx at 100% 0,  transparent 100px, #fff 50%);
			}
				
			.inquiry-item-top{
				font-size: $m-font;
				line-height: 40rpx;
				color: #1E1E1E;
				margin-top:10rpx;
				position: relative;
				font-weight: bold;
				padding-right:180rpx;
			}
			.inquiry-item-top::after{
				content: ' ';
				position: absolute;
				width: 6rpx;
				height: 36rpx;
				background: linear-gradient(180deg, #FF5E01 0%, #FF5E01 100%);
				border-radius: 3rpx;
				overflow: hidden;
				left:-35rpx;
				top:0;
			}
			.item-attr{
				padding:30rpx 0;
				.attr-blur{
					font-size: $s-font;
					line-height: 34rpx;
					color: #FF5E01;
					border-radius: 22rpx;
					background: #EFF5FF;
					padding:4rpx 32rpx;
					display: inline-block;
					margin-right:20rpx;
				}
				.attr-yellow{
					font-size: $s-font;
					line-height: 34rpx;					
					color: #FC9500;
					border-radius: 22rpx;
					background: #FFF4E5;
					padding:4rpx 32rpx;
					display: inline-block;
				}
			}
			.item-cell-div{
				.item-cell{
					font-size:26rpx;
					.label{
						color:#929292
					}
				}
			}
			.item-line{
				height:2rpx;
				background: #DEDEDE;
				width:100%;
			}
			.item-bottom{
				position: relative;
				.item-bottom-con{
					@include flexbox(space-between,center);
					flex-direction:row-reverse;
					padding-top:24rpx;
					.bottom-left{
						position: relative;
						.small-txt{
							color: #1E1E1E;
							font-size:20rpx;
						}
						.big-txt{
							font-size: 48rpx;
							font-weight: bold;
							color: #FF0000;
						}
					}
				}
			}
		}
		.goods-list-item{
			background: rgba(255,255,255,1);
			border-radius: 18rpx;
			padding:32rpx;
			box-shadow: 0px 0px 10px rgba(0,17,52,0.09);
			margin-bottom:30rpx;
			.goods-top{
				font-size: 28rpx;
				color: #070D14;
				@include flexbox(space-between,flex-start);
				.goods-name{
					padding-right:30rpx;
					@include textoverflow(1)
				}
				.goods-price{
					font-size: 30rpx;
					font-weight: bold;
					color: #FF3600;
				}
				
			}
			.goods-arrt{
				font-size: 24rpx;
				color: #B8B8B8;
				margin-top:10rpx;
			}
		}
	    .store-list-item{
			background: rgba(255,255,255,1);
			border-radius: 18rpx;
			padding:32rpx;
			box-shadow: 0px 0px 10px rgba(0,17,52,0.09);
			margin-bottom:30rpx;
			.store-top{
				position: relative;
				.store-name{
					font-size: 28rpx;
					color: #070D14;
					padding-right:200rpx;
					@include textoverflow(1)
				}
				.store-type{
					position: absolute;
					right:-32rpx;
					top:-32rpx;
					z-index: 1;
					width: 162rpx;
					height: 75rpx;
					background: #EEF0FF;
					border-radius: 0px 18rpx 0px 18rpx;
					text-align: center;
					color: #6D8AFF;
					font-size:28rpx;
					line-height: 75rpx;
				}
			}
			.store-tip{
				font-size: $s-font;
				line-height: 34rpx;					
				color: #FC9500;
				border-radius: 22rpx;
				background: #FEF2E7;
				padding:4rpx 20rpx;
				display: inline-block;
				margin-top:16rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				max-width:100%;
			}
			.store-arrt{
				font-size: 24rpx;
				color: #B8B8B8;
				margin-top:8rpx;
			}
		}
		  
	}
}
 .fixed-btn{
	 position: fixed;
	 right:10rpx;
     bottom:343rpx;
	 text-align: center;
	 z-index: 4;
	 padding-top:30rpx;
	 font-weight: bold;
 }
</style>